<!--
 * @Author: yuqy
 * @Date: 2023-04-10 17:30:15
 * @LastEditors: yuqy
 * @LastEditTime: 2023-10-23 16:00:02
 * @Descripttion: -
-->
<template>
  <div class="personal fjcc">
    <div class="contentBox faic">
      <div class="tabsBox">
        <div
          v-ripple
          v-for="item in tabsList"
          :key="item.key"
          class="faic fjcc tabsItem"
          :class="activeTab == item.key ? 'tabsActive cp' : 'cp'"
          @click="changeTabs(item)"
        >
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div class="content">
        <transition
          name="transition"
          :enter-active-class="transitionEnter"
          :leave-active-class="transitionLeave"
        >
          <div class="comBox" v-if="activeTab == 1" key="basicInfo">
            <basicInfo></basicInfo>
          </div>
        </transition>
        <transition
          name="transition"
          :enter-active-class="transitionEnter"
          :leave-active-class="transitionLeave"
        >
          <div class="comBox" v-if="activeTab == 2" key="account">
            <account></account>
          </div>
        </transition>
        <transition
          name="transition"
          :enter-active-class="transitionEnter"
          :leave-active-class="transitionLeave"
        >
          <div class="comBox" v-if="activeTab == 3" key="password">
            <password></password>
          </div>
        </transition>
        <transition
          name="transition"
          :enter-active-class="transitionEnter"
          :leave-active-class="transitionLeave"
        >
          <div class="comBox" v-if="activeTab == 4" key="bind">
            <bind></bind>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>
<script >
import basicInfo from "./modules/basicInfo.vue";
import bind from "./modules/bind.vue";
import account from "./modules/account.vue";
import password from "./modules/password.vue";
const tabsList = [
  { key: 1, name: "基本资料" },
  { key: 2, name: "修改资料" },
  { key: 3, name: "修改密码" },
  { key: 4, name: "账号绑定" }
];
export default {
  setup() {},
  data() {
    return {
      tabsList,
      activeTab: 1,
      transitionEnter: "animate__fast animate__animated animate__fadeInRight",
      transitionLeave: "animate__fast animate__animated animate__fadeOutLeft"
    };
  },
  watch: {
    activeTab (newValue, oldValue) {
      if (newValue > oldValue) {
        this.transitionEnter = 'animate__fast animate__animated animate__fadeInRight'
        this.transitionLeave = 'animate__fast animate__animated animate__fadeOutLeft'
      } else {
        this.transitionEnter = 'animate__fast animate__animated animate__fadeInLeft'
        this.transitionLeave = 'animate__fast animate__animated animate__fadeOutRight'
      }
    },
  },
  components: {
    basicInfo, password, bind, account
  },
  methods: {
    changeTabs({ key }) {
      this.activeTab = key;
    }
  }
};
</script>
<style scoped lang="less">
@import url("./less/person.less");
</style>
